* {
  padding: 0px;
  margin: 0px;
}
ul,
li {
  list-style: none;
}
li {
  width: 95px;
  height: 130px;
  /* border: 1px solid rgba(255, 0, 0, 0.6); */
  float: left;
  border-collapse: collapse;
  /* background-color: blueviolet; */
}
body {
  background: url("../image/bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
/* TODO 悬浮球 start */
.box {
  margin: 0;
  padding: 0;
  width: 300px;
  height: 300px;
  /* background-color: pink; */

  /* 弹性布局，居中 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 定位 */
  position: absolute;
  right: 150px;
  bottom: 150px;
}
.container {
  width: 200px;
  height: 200px;
  border: solid 5px #3498db;
  border-radius: 50%;
  padding: 5px;
  overflow: hidden;
}
.wave {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #3498db;
  border-radius: 50%;
}
.wave::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 40%;
  left: 50%;
  top: 0;
  transform: translate(-50%, -30%);
  animation: rotate 12s ease-out infinite;
}
.wave::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 47%;
  left: 50%;
  top: 0;
  transform: translate(-50%, -30%);
  animation: rotate 12s ease-out infinite;
}
@keyframes rotate {
  100% {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}
.bubble {
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  opacity: 0.6;
  animation-name: bubble-up;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.bubble:nth-child(1) {
  left: 20%;
  top: 80%;
  animation-duration: 1.2s;
}
.bubble:nth-child(2) {
  left: 56%;
  top: 85%;
  animation-duration: 2s;
}
.bubble:nth-child(3) {
  left: 70%;
  top: 75%;
  animation-duration: 1.6s;
}
.bubble:nth-child(4) {
  left: 32%;
  top: 90%;
  animation-duration: 1.5s;
}
.bubble:nth-child(5) {
  left: 85%;
  top: 69%;
  animation-duration: 2.2s;
}
@keyframes bubble-up {
  25% {
    transform: translate(12px, -50px);
  }
  50% {
    transform: tranlate(0, -100px);
  }
  75% {
    transform: translate(-12px, -150px);
  }
  100% {
    transform: translate(0, -200px);
  }
}
/* 悬浮球 end */
